<template>
  <!--监控预览执行计划页面-->
  <el-dialog  :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
    <el-table :data="result"  border
              style="width: 100%">>
      <el-table-column
        prop="id"
        label="id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="executePlanSqlList"
        label="本执行计划中具体要执行的sql信息"
        width="100">
      </el-table-column>
      <el-table-column
        prop="currentState"
        label="执行计划当前状态"
        width="150">


      </el-table-column>
      <el-table-column
        prop="createTime"
        label="计划创建时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="计划更新时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="submittedTime"
        label="提交到集群的时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="finishedTime"
        label="结束时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="failedTime"
        label="失败时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="ifAlert"
        label="是否触发报警"
        width="150">
                <template slot-scope="scope">
                  <span>{{scope.row.ifCheck === true ?'是':'否' }}</span>
                </template>
      </el-table-column>
    </el-table>
  </el-dialog>

</template>
<script>
import api from '@/api/monitor/monitor'
// import {parseTime} from '@/utils'

// const now = parseTime(new Date(new Date().getTime()), '{y}-{m}-{d}')
export default {
  data() {
    return {
      open: false,
      // 弹出层标题
      title: "",
      page:2,
      pageNo:10,
      pageSize:10,
      result:
        [
          // {
          //   "type": "ALL",
          //   "key": "province",
          //   "ifCheck": false,
          //   "result": null
          // },
          // {
          //   "type": "INCLUDE_SET",
          //   "key": "dt",
          //   "ifCheck": true,
          //   "result": [
          //     "2020-06-14"
          //   ]
          // }
        ]
    };
  },
  mounted() {
    // this.init()
    // this.getExecutePlanList()
  } ,
  methods: {
    init(id) {
      this.open = true;
      this.title = "预览执行计划";
      this.getExecutePlanList(id)
      // this.$nextTick(() => {
      //   api.allRulesByTableName().then(response => {
      //     this.result = response.data;
      //     this.open = true;
      //   });
      // });
    },
    getExecutePlanList(id){
      api.listExecutePlanByTableInfoId(id,this.page,this.pageSize).then((response) => {
        console.log("-----------------response.data"+response.result)
        if (response.status == 200) {
          this.result = response.result
          // this.getList()
        } else
          "错误";
        // })
        //   this.result = response;
        // })
        //   .catch((response) => {
        //     console.log("失败" + response);
        //     // Vue.$message.error('服务器错误，请稍后再试')
        //     //reject(response)
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handList(this.optionCode)
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.handList(this.optionCode)
    }
  }
}
</script>



